<template>
	<div class="kp-forget">
		<header class="forget_header">
			<div class="forget_text">
				<span class="forget_span" @click="filmReturn"></span>
				<div class="forget_kp">找回密码</div>
			</div>
		</header>
		<div class="forget">
			<div class="forget_dl">
				<div class="forget_speed">
					<form>
						<div class="input_forget">
							<input type="number" name="" v-model="telt" placeholder="手机号" maxlength="11" @input="inputband" /><span class="input_span" v-show="isLogin" @click="dellogin"></span>
						</div>
						<div class="input_forget">
							<input type="text" name="" placeholder="验证码" v-model="yanz" @input="inputband" />
							<span class="input_ver" @click="inputyanz" v-if="is_card">{{yzm}}</span>
							<span class="input_ver zmcolor" v-else>{{yzm}}</span>
						</div>
						<div class="input_forget" v-if="isPass">
							<input type="password" name="" v-model="pass" placeholder="新密码" @input="inputband"><span class="input_mn" @click="xs"></span>
						</div>
						<div class="input_forget" v-else>
							<input type="text" name="" v-model="pass" placeholder="新密码" @input="inputband"><span class="input_mm" @click="xs"></span>
						</div>
						<div class="inp_sub inp_gray tc" v-if="isRedist">确认修改密码</div>
						<div class="inp_sub tc" @click="surePass" v-else>确认修改密码</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import hex_md5 from "../../public/md5"
	export default {
		data() {
			return {
				isLogin: false,
				telt: '', //手机号
				isPass: true,
				yanz: '',
				pass: '',
				isRedist: true, //是否注册登录
				is_card: true,
				yzm: '获取验证码',
				i:60,
			}
		},
		mounted() {
			//载入后执行
		},
		methods: {
			//方法放置
			inputband() {
				if(this.telt != '') {
					this.isLogin = true;
				} else {
					this.isLogin = false;
				}
				var telnum = /^1[3456789]\d{9}$/;
				if(this.telt != '' && this.yanz != '' && this.pass != '' && telnum.test(this.telt)) {
					this.isRedist = false;
				} else {
					this.isRedist = true;
				}
			},
			dellogin() {
				this.telt = '';
				this.isLogin = false;
			},
			inputyanz() {
				//验证手机号
				var telnum = /^1[3456789]\d{9}$/;
				if(!telnum.test(this.telt)) {
					this.$toast('请正确填写手机号码!');
					return false;
				} else {
					this.is_card = false;
					let time = window.setInterval(() => {
						this.yzm = "剩余" + (this.i--) + "秒";
						if(this.i == -1) {
							window.clearInterval(time);
							this.is_card = true;
							this.yzm = "重新获取";
							this.i = 60;
						}
					}, 1000);
					let param = {
						phone: this.telt,
						type: 'forget'
					};
					this.$http.post(
						this.$baseUrl.baseurl + 'kpcx/sendMsg',
						param
					).then(function(res) {
						

					}).catch(error => {

					});
				}

			},
			surePass() {
				var patrn=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
				if(!patrn.test(this.pass)) {
					this.$toast('密码需要8到14位字母和数字');
					return false;
				} else {
//					var pass = this.$md5(this.pass)
					var pass = this.pass
					let param = {
						'passWord':hex_md5.hex_md5(pass),
						'phone':this.telt,
						'smsCode':this.yanz
					};
					let that = this;
					this.$http.post(
//						this.$baseUrl.baseurl + 'kpcx/appPersonalCenter/changePassword',
						this.$baseUrl.baseurl + 'kpcx/forgetPassWord',
						param
					).then(function(res) {
//						console.log(res);
						if(res.data.Code == 0){
							that.$router.go(-1);
						}else{
							that.$toast(res.data.msg);
						}
					}).catch(error => {
	
					});
				}
			},
			xs() {
				this.isPass = !this.isPass
			},
			filmReturn() { //回退
				this.$router.go(-1);
			},
		},
		created() {
			//创建后
		},
		watch: {
			//监听放置
		},
		components: {

		},
		computed: {}
	};
</script>

<style scoped>
	.kp-forget{
		height: 100vh;
		background: #fff;
	}
	.forget_header {
		height: 95px;
		border-bottom: 1px solid rgba(183, 183, 183, 0.3);
	}
	
	.forget_text {
		display: -webkit-box;
		display: flex;
	}
	
	.forget_span {
		display: inline-block;
		width: 36px;
		height: 36px;
		background: url("../../assets/fanhui.png") 0 0;
		background-size: cover;
		margin: 31px 228px 0 30px;
	}
	
	.forget_kp {
		-webkit-box-flex: 1;
		flex: 1;
		margin: 31px 0 0 0;
		height: 32px;
		width: 228px;
		font-size: 32px;
		letter-spacing: 1px;
		font-family: "MicrosoftYaHei";
	}
	
	.forget_speed {
		padding: 0 28px;
	}
	
	.input_forget {
		width: 690px;
		height: 110px;
		padding: 30px 0;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(183, 183, 183, 0.3);
		position: relative;
		display: -webkit-flex;
		display: flex;
	}
	
	.input_forget>input {
		border: none;
		outline: none;
		font-size: 32px;
		font-family: "MicrosoftYaHeiLight";
		width: 100%;
		flex: 1;
		-webkit-box-flex: 1;
		height: 42px;
		line-height: 42px;
		color: rgb(51, 51, 51);
		letter-spacing: 0;
	}
	
	.input_forget>input::-webkit-input-placeholder {
		color: rgb(168, 168, 168);
	}
	
	.input_span {
		display: inline-block;
		width: 28px;
		height: 28px;
		margin-top: 7px;
		background: url("../../assets/qingchu.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.input_ver {
		font-size: 32px;
		color: rgb(59, 195, 194);
		height: 42px;
		line-height: 42px;
		padding-right: 40px;
	}
	
	.inp_sub {
		border: none;
		background: rgb(59, 195, 194);
		width: 679px;
		height: 80px;
		border-radius: 40px;
		color: #fff;
		font-size: 36px;
		outline: none;
		margin: 150px 5px 0;
		line-height: 80px;
	}
	
	.inp_gray {
		background: rgb(216, 216, 216);
	}
	
	.input_mm {
		display: inline-block;
		width: 44px;
		height: 28px;
		margin-top: 7px;
		background: url("../../assets/kejian.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.input_mn {
		display: inline-block;
		width: 44px;
		height: 28px;
		margin-top: 7px;
		background: url("../../assets/bukejian.png") 0 0 no-repeat;
		background-size: cover;
	}
	
	.inp_gray {
		background: rgb(216, 216, 216);
	}
	.zmcolor {
		color: #666;
	}
</style>